<template>
	<uni-popup ref="popupUpdate" type="center" :is-mask-click="false">
		<view class="model-popup">
			<view class="model-popup_title l-f l-row-c">
				<view @click.stop="onCloseUpdate"  hover-class="hover-class" :hover-stay-time="100">
					<image class="model-popup_title_menu" src="@/static/images/menu.png" mode="widthFix"></image>
				</view>
				<view class="model-popup_title_label">模型更新</view>
			</view>
			<view class="model-popup_desc">模型正在更新中请勿离开哟</view>
			<view class="l-f l-row-c">
				<view class="model-popup_box l-f l-row-c">
					<image class="model-popup_box_icon" src="@/static/images/model.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="l-f l-row-c">
				<view class="model-popup_progress l-f l-row-c">
					<view class="model-popup_progress_info l-f">
						<view class="model-popup_progress_info_label" v-show="progress>30">正在更新</view>
						<image 
						:style="{
							width: progressWidth
						}"
						class="model-popup_progress_info_active" 
						src="@/static/images/progress.png"></image>
						<view class="model-popup_progress_info_num">{{progress}}%</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name:"model-update",
		props: {
			progress: {
				type: Number,
				default: 0
			}
		},
		computed: {
			progressWidth: function() {
				return Math.ceil((this.progress*540)/100) + 'rpx'
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			open() {
				this.$refs.popupUpdate.open()
			},
			close() {
				this.$refs.popupUpdate.close()
			},
			onCloseUpdate() {
				this.$emit('closeUpdate')
			}
		}
	}
</script>

<style lang="scss" scoped>
.model-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	background-color: rgba(48, 49, 52, 1);
	padding-top: var(--status-bar-height);
	&_title {
		position: relative;
		margin-top: 80rpx;
		&_menu {
			width: 250rpx;
			height: 250rpx;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		&_label {
			font-size: 30rpx;
			color: #ffffff;
			font-weight: 700;
		}
	}
	&_desc {
		font-size: 34rpx;
		color: #ffffff;
		font-weight: 700;
		text-align: center;
		margin-top: 200rpx;
	}
	&_box {
		margin-top: 100rpx;
		background: url("@/static/images/model_bg.png") no-repeat;
		background-size: 100% 100%;
		width: 632rpx;
		height: 600rpx;
		&_icon {
			width: 400rpx;
			height: 400rpx;
		}
	}
	&_progress {
		margin-top: 75rpx;
		width: 632rpx;
		height: 146rpx;
		background: url("@/static/images/progress_bg.png") no-repeat;
		background-size: 100% 100%;
		&_info {
			position: relative;
			width: 540rpx;
			&_label {
				font-size: 24rpx;
				color: #ffffff;
				font-weight: 700;
				position: absolute;
				left: 30rpx;
				top: 50%;
				z-index: 1;
				transform: translateY(-50%);
			}
			&_active {
				width: 200rpx;
				height: 86rpx;
			}
			&_num {
				font-size: 28rpx;
				color: #ffffff;
			}
		}
	}
}
</style>